<style>
.layout-breadcrumb {
    height: 3%;
    background: #f7f7f7;
    text-align: left;
    padding: 3px 0 0 10px;
}
.rowstyle{
    height:3px !important;
    width:100%;
    background:#ba6a5d;
}
</style>

<template>
    <div>
        <p class="rowstyle"></p>
        <div class="layout-breadcrumb">        
            <Breadcrumb>
                <Breadcrumb-item href="/home">
                    <Icon type="ios-home-outline"></Icon> 首页
                </Breadcrumb-item>
                <Breadcrumb-item :href="item.RouterUrl" v-for="item in BreadcrumbItem" :key="item.RouterUrl">
                    <Icon :type="item.RouterIcon"></Icon> {{item.RouterName}}
                </Breadcrumb-item>
            </Breadcrumb>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            BreadcrumbItem: []
        }
    },
    methods: {
        getBreadcrumb() {
            this.BreadcrumbItem = this.$store.state.BreadcrumbItem;
        }
    },
    created: function () {
        this.getBreadcrumb();
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        "$route": "getBreadcrumb"
    }
}
</script>